<template>
  <div class="app-container">

		<div class="filter-container">
			<el-input  style="width: 200px;"   v-model="query.name" placeholder="真实姓名" class="filter-item"  ></el-input>
			<el-input  style="width: 200px;"   v-model="query.phone" placeholder="手机" class="filter-item"  ></el-input>

			<!-- <el-select v-model="type" class="filter-item"  placeholder="请选择">
					<el-option
					v-for="item in mapType"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
			</el-select> -->
      <el-select  class="filter-item" v-model="query.isBinding" placeholder="是否绑定" >
        <el-option label="是否绑定" value="all"></el-option>
        <el-option label="是" value="1"></el-option>
        <el-option label="否" value="2"></el-option>
      </el-select>

			<br/>
			<el-date-picker class="filter-item"
        v-model="query.activeTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="激活时间"
        end-placeholder="激活时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        >
      </el-date-picker>
      <el-date-picker class="filter-item"
        v-model="query.createdAt"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="创建时间"
        end-placeholder="创建时间"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        >
      </el-date-picker>

      <!-- <el-date-picker class="filter-item"
        v-model="query.activeTime"
        type="date"
        placeholder="激活时间"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <el-date-picker class="filter-item"
        v-model="query.createdAt"
        type="date"
        placeholder="创建时间"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker> -->

			<el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
			<el-button @click="getRecords" type="danger" class="filter-item">刷新</el-button>
			<el-button @click="exportXls"  class="filter-item">导出</el-button>
		</div>

		<el-table v-loading="listLoading"	:data="list"	element-loading-text="Loading"	border	fit	highlight-current-row>
			<!-- <el-table-column type="selection" width="55" /> -->
			<!-- <el-table-column type="index" label="序列" width="50" /> -->
			<el-table-column prop="id" label="ID" width="50" />
			<el-table-column prop="avatar" label="头像" width="80" >
					<template slot-scope="scope">
						<img v-if="scope.row.avatar" class="table-img" :src="host+scope.row.avatar">
					</template>
			</el-table-column>
			<el-table-column prop="get_driver_info.name" label="姓名" width="120" />
			<el-table-column prop="phone" label="电话" width="120" />
			<el-table-column prop="get_driver_info.id_card" label="身份证号" width="180" />
			<el-table-column prop="get_driver_info.gender" label="性别" width="60" />
			<el-table-column prop="get_driver_info.address" label="地址" min-width="300" />
			<el-table-column prop="serial_number" label="序列号" width="100" />
			<el-table-column prop="active_time" label="激活时间" width="160" />
			<el-table-column prop="created_at" label="创建时间" width="160" />
			<!-- <el-table-column prop="status" label="启用/禁用" width="100" >
				<template slot-scope="scope">
						<el-switch	v-model="scope.row.status"	active-color="#409EFF"	inactive-color="#909399"
							:active-value="1"	:inactive-value="2"		@change="changeStatus(scope.row)">
						</el-switch>
				</template>
			</el-table-column> -->
			<el-table-column fixed="right" label="操作" min-width="250">
				<template slot-scope="scope">
					<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					<el-button size="mini" type="primary"  @click="resetPassword(scope.$index, scope.row)">重置密码</el-button>
				</template>
			</el-table-column>
		</el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>


  </div>
</template>

<script>

import { myGet,myPost } from '@/utils/myRequest'

const urlUserLst = '/guard/user/lst';
const urlAddUser = '/guard/user/add';
const urlGetUser = '/guard/user/detail';
const urlDeleteUser = '/guard/user/del';
const urlExportUser = '/guard/user/exportXls';
const urlResetPassword = '/guard/user/resetPassword';

export default {

    data() {
        return {
					host:process.env.VUE_APP_HOST,
					isAdd:true,
					addDialogFormVisible:false,
					mapType:[],
					query:{
						name:'',
						phone:'',
            activeTime:'',
            createdAt:'',
            isBinding:"all",
					},
					pagination:{
						total:0,
						page:1,
						pageSize:20,
					},
					dialogFormVisible:false,
					list: [],
					formLoading:false,
					listLoading: true,

        }
    },
    methods: {

      resetPassword(index, row){
        myGet(urlResetPassword,{
          id:row.id
        }).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
          }
        })
      },

			exportXls(){
			  this.listLoading = true
				let link = document.createElement("a");
				//创建一个a标签
				link.style.display = "none";
				//将a标签隐藏

				link.href = urlExportUser+"?"+this.toParams(this.query);
				//给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
				link.setAttribute("download", name);
				// 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
				document.body.appendChild(link);
				//将上面创建的a标签加入到body的尾部
				link.click();
        this.listLoading = false
			},

      toParams(param) {
        var result = ""
        for (let name in param) {
          if (typeof param[name] != 'function') {
            result += "&" + name + "=" + encodeURI(param[name]);
          }
        }
        return result.substring(1)
      },


      reload(){
        Object.assign(this.$data.query,this.$options.data().query)
        Object.assign(this.$data.pagination,this.$options.data().pagination)
        this.getRecords()
      },
			getRecords(){
        this.listLoading = true;
        let params = Object.assign(this.query,this.pagination)
					myGet(urlUserLst,params).then((res) =>{
            this.listLoading = false;
            if(res.status){
              this.list = res.data.records
              this.pagination.total = res.data.total
            }
          })
			},
			changeStatus(row){
        myPost(urlAddUser,{id:row.id, status:row.status}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
          }
        })
			},
			handleEdit(index, row) {
				const id = row.id
				this.$router.push({path:`edit/${id}`})
			},
			handleDelete(index, row) {
					this.$confirm('确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
            let ids = row.id
            myGet(urlDeleteUser, { ids }).then(res => {
              if (res.status) {
                this.$message.success(res.msg);
                this.reload();
              }
            })
          })
			},

			handleSizeChange(val) {
					this.pagination.pageSize = val
					this.pagination.page = 1
					this.getRecords()
			},
			handleCurrentChange(val) {
					this.pagination.page = val
					this.getRecords();
			},
			//多选
			toggleSelection(rows) {
					if (rows) {
					rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
					});
					} else {
							this.$refs.multipleTable.clearSelection();
					}
			}
    },
    mounted() {
        this.getRecords()
    }
}
</script>

<style>

.table-img{
    width: 50px;
    height: 50px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>


